<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
    html{
        height: 100%;
    }
        body{
            height: 100%;
            margin: 0;
            background-image: url(timg1.jpg);
            background-size: 115% 100%;
            display: flex;
            /*direction: row;*/
            align-items: center;
            justify-content: center;
        }
        .biaopan{
            width: 40vw;
            height: 40vw;
            border: 1px solid #6f945e;
            box-shadow: 10px 10px 50px 50px #FFFEE2 ;
            border-radius: 50%;
            position: relative;
            left:26vw;
        }
        .kuang{
            width: 34vw;
            height: 11vw;
            border: 1px solid #FFFEE2;
            box-shadow: 10px 10px 50px 20px #FFFFFA inset;
            position: relative;
            left:3vw;
            top: 14vw;
        }
        #testDiv{
            font-size: 7vw;
            color: #6f945e;
            height: 7vw;
            width: 28vw;
            position: relative;
            top: 1vw;
            left: -27vw;

        }
        #testSpan{
            color: #A0AF8E;
            font-size: 2vw;
            height: 2vw;
            width: 22vw;
            position: relative;
            top: -5vw;
            left: 1vw;
            
        }
    </style>
</head>
<body>
    <div class="biaopan">
        <div class="kuang">
            
        </div>
    </div>
</body>
</html>
<script>
    
    var SpanEle = document.createElement("span");
    document.body.appendChild(SpanEle);
    SpanEle.innerHTML = ""
    SpanEle.id ='testSpan'
    // divEle.style.width ="300px";
    var time = 0;
    setInterval(function(){
        time++;
        // var minute = Math.floor(time/60);
        // var second = time%60;//表示余数
        var now =new Date();
        var year = now.getFullYear()
        console.log(year)
        var month = now.getMonth()+1
        console.log(month)
        var day = now.getDate()
        console.log(day)
        var weekday = now.getDay()
        console.log(weekday)
        // 三元运算
           month = month<10?"0"+month:mouth;
           day = day<10?"0"+day:day;
        //    week = weekday<10?"0"+weekday:weekday;
    //     switch(weekday){
    //     // case 匹配值
    //     case 1:{
    //         console.log("星期一")
    //     }
    //     break;
    //     case 2:{
    //         console.log("星期二")
    //     }
    //     break;
    //     case 3:{
    //         console.log("星期三")
    //     }
    //     break;
    //     case 4:{
    //         console.log("星期四")
    //     }
    //     break;
    //     case 5:{
    //         console.log("星期五")
    //     }
    //     break;
    //     case 6:{
    //         console.log("星期六")
    //     }
    //     break;
    //     case 7:{
    //         console.log("星期天")
    //     }
    //     break;
    // }
           
        //    day   = day  <10?"0"+day:day;
       
        SpanEle.innerHTML = year+"年"+month+"月"+day+"日"+"星期"+"日一二三四五六".charAt(weekday);

    },1000);
    // function daoJiShi(){

    // }
    // setInterval(daoJiShi,1000) //每隔多少毫秒 执行一次  无限次
    // 
    // 每隔多少毫秒延迟执行一次  只执行一次
    // setTimeout(function(){  
    //     console.log(Date.now())
    //     console.log("aaaa")
    // },1000)

    // 在自己的方法中调用本身，（递归的思路）
    var DivEle = document.createElement("div");
    document.body.appendChild(DivEle);
    DivEle.innerHTML = ""
    DivEle.id ='testDiv'
    function shizhong(){
        time++;
        var now =new Date();
        var hours = now.getHours()
        console.log(hours)
        var minute = now.getMinutes()
        console.log(minute)
        var second = now.getSeconds()
        minute = minute<10?"0"+minute:minute;
        second = second<10?"0"+second:second;
        DivEle.innerHTML = hours+":"+minute+":"+second;
        setTimeout(shizhong,1000);
    }
    setTimeout(shizhong,1000);

    
</script>